import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Legend, Annotation } from 'bizcharts';

// 数据源
const data = [
  {
    month: '2021-2-1',
    city: 'data-clickhouse',
    revenue: 7,
  },
  {
    month: '2021-2-1',
    city: 'application-redis',
    revenue: 8,
  },
  {
    month: '2021-2-1',
    city: 'data-rds',
    revenue: 11,
  },
  {
    month: '2021-2-1',
    city: 'application-rds',
    revenue: 10,
  },
  {
    month: '2021-2-1',
    city: 'sisrral-time-interfa',
    revenue: 2,
  },
  {
    month: '2021-2-2',
    city: 'data-clickhouse',
    revenue: 9,
  },
  {
    month: '2021-2-2',
    city: 'application-redis',
    revenue: 10,
  },
  {
    month: '2021-2-2',
    city: 'data-rds',
    revenue: 12,
  },
  {
    month: '2021-2-2',
    city: 'application-rds',
    revenue: 13,
  },
  {
    month: '2021-2-2',
    city: 'sisrral-time-interfa',
    revenue: 13,
  },
  {
    month: '2021-2-3',
    city: 'application-rds',
    revenue: 8,
  },
  {
    month: '2021-2-3',
    city: 'sisrral-time-interfa',
    revenue: 3,
  },
  {
    month: '2021-2-3',
    city: 'data-clickhouse',
    revenue: 11,
  },
  {
    month: '2021-2-3',
    city: 'application-redis',
    revenue: 12,
  },
  {
    month: '2021-2-3',
    city: 'data-rds',
    revenue: 15,
  },
];

const cols = {
  month: {
    range: [0.05, 0.95],
  },
  revenue: {
    min: 0,
  },
};

export default class LetfChart extends Component {
  render() {
    const { height } = this.props;
    return (
      <Chart
        height={height - 40}
        data={data}
        scale={cols}
        autoFit
        padding={[50, 50, 40]}
      >
        <Legend position="top-left" offsetX={24} offsetY={5} maxWidth={560} />
        <Axis name="month" />
        <Axis
          name="revenue"
          label={{
            formatter: val => `${val}`,
          }}
        />
        <Tooltip
          shared
          crosshairs={{
            type: 'y',
          }}
        />
        <Geom type="line" position="month*revenue" size={2} color={'city'} />
        <Geom
          type="point"
          position="month*revenue"
          size={4}
          shape={'circle'}
          color={'city'}
          style={{
            stroke: '#fff',
            lineWidth: 1,
          }}
        />
        <Annotation.Text position={['50%', '50%']} style={{ fill: 'red' }} />
        <Annotation.DataRegion
          start={['2021-02-01', 0]}
          end={['2021-02-01', 0]}
          region={{ style: { fill: '#eee' } }}
          lineLength={0}
          text={{
            style: { fill: 'green' },
            content: 'Annotation.DataRegion',
          }}
        />
      </Chart>
    );
  }
}
